<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
	<title>排行榜</title>

  	{$h->import('static/css/public.css')}
	<link rel="stylesheet" href="/cdn/weui.min.css">
	<link rel="stylesheet" href="/cdn/jquery-weui.min.css">
	<style type="text/css">
		body{
			background: #f7f8fa;
			position: relative;
		}
		.ranking_header_container{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 12px 12px;
			background: #fff;
		}
		.ranking_headerLeft_container{
			display: flex;
			flex:1;
			align-items: center;
		}
		.ranking_headerLeft_container img{
			width: 38px;
			height: 38px;
			border-radius: 50%;
			margin-right: 14px;
		}
		.ranking_headerLeft_Info_container{
			flex: 1;
		}
		.ranking_headerLeft_Info_container h3{
			font-size: 15px;
			font-weight: bold;
			color: #111;
		}
		.ranking_headerLeft_Info_container p{
			font-size: 14px;
			color: #7c7c7c;
		}
		.ranking_headerright_container{

		}
		.ranking_headerright_container a{
			color: #fff;
			background: #f64e41;
			border-radius: 20px;
			padding: 7px 12px;
			font-size: 14px;
			cursor: pointer;
		}
		.ranking_main_container{
			margin-top: 10px;
			background: #fff;
		}
		.ranking_main_content{
			display: flex;
			align-items: center;
			padding: 10px 12px;
			border-bottom: 1px solid #ececec;
			justify-content: space-between;
		}
		.ranking_mainLeft_content{
			flex:1;
			display: flex;
			align-items: center;
		}
		.ranking_mainLeft_content span{
			color: #898989;
			font-size: 16px;
			margin-right: 15px;
		}
		.ranking_mainLeft_content img{
			width: 38px;
			height: 38px;
			border-radius: 50%;
			margin-right: 15px;
		}
		.ranking_mainLeft_content p{
			color: #111;
			font-size: 15px;
			font-weight: bold;
		}
		.ranking_mainRight_content{

		}
		.ranking_mainRight_content p{
			color: #f64e41;
			font-size: 14px;
		}
		.header_bg{
			display: block;
			margin: 0 auto;
			width: 100%
		}
		.ranking_headerright_container p{
			color: #f64e41;
			font-size: 15px;
		}
	</style>
</head>
<body>
	<img src="http://weidogstest.oss-cn-beijing.aliyuncs.com/805bcca5b9d3d71699e54f560691c3bd.jpg" class="header_bg">
	<div class="ranking_header_container">
		<div class="ranking_headerLeft_container">
			<img src="{$help_user->avatar}">
			<div class="ranking_headerLeft_Info_container">
				<h3>{$help_user->nickname}</h3>
				
			</div>
		</div>
		<div class="ranking_headerright_container">

			<p>邀请{$counts}个朋友</p>
		</div>
	</div>
	<div class="ranking_main_container">
		{loop@i $allUser as $user}
			<div class="ranking_main_content">
				<div class="ranking_mainLeft_content">
					<span>{$i}</span>
					<img src="{$user['avatar']}">
					<p>{$user['nickname']}</p>
				</div>
				<div class="ranking_mainRight_content">
					<p>邀请{$user['helpCount']}个朋友</p>
				</div>
			</div>
		{/loop}

	</div>
	<script src="/cdn/jquery.min.10.js"></script>
	<script src="/cdn/jquery-weui.min.js"></script>

	<script type="text/javascript">
		
	</script>
</body>
</html>